<template>
  <view class="member-card-container">
    <view class="header-section">
      <text class="page-title">会员卡</text>
    </view>
    
    <view class="card-container">
      <view class="member-card">
        <view class="card-header">
          <text class="card-title">ShapeUp健身</text>
          <text class="card-type">{{ cardInfo.type }}</text>
        </view>
        
        <view class="card-body">
          <view class="card-number">
            <text class="label">卡号：</text>
            <text class="value">{{ cardInfo.cardNumber }}</text>
          </view>
          
          <view class="card-holder">
            <text class="label">持卡人：</text>
            <text class="value">{{ cardInfo.holderName }}</text>
          </view>
          
          <view class="card-expiry">
            <text class="label">有效期：</text>
            <text class="value">{{ cardInfo.expiryDate }}</text>
          </view>
          
          <view class="card-balance" v-if="cardInfo.balance !== undefined">
            <text class="label">余额：</text>
            <text class="value balance">¥{{ cardInfo.balance }}</text>
          </view>
          
          <view class="card-times" v-if="cardInfo.remainingTimes !== undefined">
            <text class="label">剩余次数：</text>
            <text class="value times">{{ cardInfo.remainingTimes }}次</text>
          </view>
        </view>
        
        <view class="card-footer">
          <text class="status" :class="cardInfo.statusClass">{{ cardInfo.status }}</text>
        </view>
      </view>
    </view>
    
    <view class="actions-section">
      <button class="action-button" @click="recharge">充值</button>
      <button class="action-button" @click="viewTransactions">交易记录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { cardApi } from '../../src/services/api'

// 会员卡信息
const cardInfo = ref({
  type: '年卡会员',
  cardNumber: 'MC202510260001',
  holderName: '张三',
  expiryDate: '2026-10-26',
  balance: 1050.00,
  remainingTimes: undefined,
  status: '正常',
  statusClass: 'status-active'
})

// 页面加载时获取会员卡信息
onMounted(() => {
  fetchCardInfo()
})

// 获取会员卡信息
const fetchCardInfo = async () => {
  try {
    // 调用获取会员卡信息的API
    const response: any = await cardApi.getCardInfo()
    cardInfo.value = response.data
    console.log('获取会员卡信息成功')
  } catch (error) {
    console.error('获取会员卡信息失败:', error)
    uni.showToast({
      title: '获取会员卡信息失败',
      icon: 'none'
    })
  }
}

// 充值
const recharge = () => {
  uni.showToast({
    title: '充值功能开发中',
    icon: 'none'
  })
}

// 查看交易记录
const viewTransactions = () => {
  uni.navigateTo({
    url: '/pages/member/transactions'
  })
}
</script>

<style lang="scss" scoped>
.member-card-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.card-container {
  perspective: 1000px;
  margin-bottom: 30rpx;
}

.member-card {
  background: linear-gradient(135deg, #4B0082, #8A2BE2);
  border-radius: 20rpx;
  padding: 40rpx;
  color: #fff;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
}

.card-type {
  font-size: 28rpx;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.card-body {
  margin-bottom: 40rpx;
}

.card-number, .card-holder, .card-expiry, .card-balance, .card-times {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
}

.value {
  font-size: 28rpx;
  font-weight: bold;
}

.balance {
  font-size: 36rpx;
  color: #ffeb3b;
}

.times {
  font-size: 36rpx;
  color: #ffeb3b;
}

.card-footer {
  text-align: right;
}

.status {
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
}

.status-active {
  background-color: rgba(76, 175, 80, 0.3);
}

.actions-section {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.action-button {
  flex: 1;
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  
  &:active {
    opacity: 0.8;
  }
}
</style>